<template>
    <el-container>
        <!-- 头部导航 -->
        <el-header class="exam-header">
            <div class="header-content">
                <!-- 系统标题 -->
                <div class="system-title">
                    <el-icon class="title-icon">
                        <Reading />
                    </el-icon>
                    <span class="text-green-600 font-bold text-xl">食品安全在线考试系统</span>
                </div>

                <!-- 用户信息区 -->
                <div class="user-panel">
                    <!-- 头像 -->
                    <el-avatar :size="40"
                        :src="userinfo.avatar ? userinfo.avatar : 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'"
                        class="mr-2" />
                    <!-- 考生信息 -->
                    <el-dropdown>
                        <span class="user-info">
                            <span class="username">{{ userinfo.userName }}</span>
                            <span class="nickname">{{ userinfo.nickName }}</span>
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item @click="handleLogout">
                                    <el-icon>
                                        <SwitchButton />
                                    </el-icon>退出登录
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
            </div>
        </el-header>
        <el-main>
            <!-- 路由视图容器 -->
            <router-view v-slot="{ Component }">
                <!-- 添加过渡动画 -->
                <transition name="fade" mode="out-in">
                    <!-- 保持组件状态避免重复渲染 -->
                    <component :is="Component" />
                </transition>
            </router-view>
        </el-main>
    </el-container>
</template>
<script setup>
// 全局样式引入
import { SwitchButton, Reading } from '@element-plus/icons-vue'
import { useRoute, useRouter } from 'vue-router'
import emitter from '../utils/emit'
import { onMounted, ref } from 'vue'
import { examApi } from '@/api/exam'
import { ElMessageBox } from 'element-plus'
const route = useRoute()
const userinfo = ref({ avatar: '' })
const router = useRouter()

const handleLogout = () => {
    // 退出登录逻辑
    ElMessageBox.confirm('确定要退出登录吗？', '退出提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        closeOnClickModal: false
    }).then(() => {
        // 确认退出逻辑
        localStorage.removeItem('exam_token')
        localStorage.removeItem('userinfo')
        localStorage.removeItem('login_info')
        router.push('/login')
    }).catch(() => {
        // 取消操作
        console.log('取消退出')
    })
}
//获取登录信息
const getUserinfo = async () => {
    examApi.getProfile().then(res => {
        console.log(res);
        if (res.code == 200) {
            userinfo.value = res.data.user
        }
    })
}
getUserinfo()
</script>
<style lang="scss" scoped>
.el-container {
    height: 100%;
}

.el-main {
    padding: 15px;
    height: 100%;
}

/* 头部容器 */
.exam-header {
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid #e4e7ed;
    height: 64px;
}

/* 头部内容容器 */
.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    // max-width: 1200px;
    height: 100%;
    margin: 0 auto;
    padding: 0 5%;
}

/* 系统标题 */
.system-title {
    display: flex;
    align-items: center;
}

.title-icon {
    color: #13ce66;
    font-size: 28px;
    margin-right: 8px;
}

.system-title span {
    color: #13ce66;
    font-weight: 700;
    font-size: 20px;
}

/* 用户信息面板 */
.user-panel {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* 用户信息文字 */
.user-info {
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

.username {
    color: #666;
    font-size: 12px;
    line-height: 1.4;
}

.nickname {
    color: #333;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.4;
}

/* 下拉菜单图标 */
.el-dropdown-menu__item .el-icon {
    margin-right: 8px;
}

/* 头像 */
.el-avatar {
    border: 2px solid #e8e8e8;
    transition: border-color 0.3s;
}

.el-avatar:hover {
    border-color: #13ce66;
}
</style>